<template>
  <div style="text-align:center;margin:auto;">
    <el-form ref="dataForm" :rules="rules" :model="fields" label-position="left" label-width="110px" style="margin-left:50px;margin-right:50px;">
      <el-form-item label="姓名" prop="perName">
        <el-input v-model.trim="fields.perName" placeholder="请输入姓名" clearable :disabled="this.operate === 'update'?true:false" />
      </el-form-item>
      <el-form-item label="身份证" prop="perCard">
        <el-input v-model.trim="fields.perCard" placeholder="请输入身份证" clearable :disabled="this.operate === 'update'?true:false"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="perMobile">
        <el-input v-model.trim="fields.perMobile" placeholder="请输入联系电话" clearable maxlength="11" oninput="value=value.replace(/\D/g, '')" />
      </el-form-item>
      <el-form-item label="企业" prop="comName">
        <el-input v-model.trim="fields.comName" placeholder="请输入企业" clearable :disabled="this.operate === 'update'?true:false"/>
      </el-form-item>
      <el-form-item label="地址" prop="distId">
        <el-select
          ref="province"
          v-model="province"
          placeholder="省/直辖市"
          @change="provinceChange"
          style="width: 100%;"
          clearable
          :disabled="this.operate === 'update'?true:false"
        >
          <el-option
            v-for="item in region.province"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('dialogFormVisibleEmit', false)">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="createData()">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import { getDistricts } from '@/api/company'
export default {
  name: 'DataForm',
  props: {
    fields: { type: Object, default: Object },
    loading: { type: Boolean, default: false },
    operate:{ type: String, default: ''}
  },
  data() {
    return {
      region: {
        province: [],
        city: [],
        area: []
      },
      rules: {
        perName: [{ required: true, trigger: 'blur', message: '请输入姓名' }],
        perCard: [
          { required: true, trigger: 'blur', message: '请输入身份证' },
          { min: 18, max: 18, trigger: 'blur', message: '请输入正确的身份证号' }
        ],
        perMobile: [{ min: 11, max: 11, trigger: 'blur', message: '请输入正确的手机号'}]
      },
      province: ''
    }
  },
  watch: {
    'fields.distId': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.initProvince()
        } else {
          this.province = ''
        }
      },
      deep: true
    }
  },
  created() {
    console.log(this.operate)
    this.getDistrictsList()
  },
  methods: {
    provinceChange(value) {
      this.fields.distId = value
    },
    initProvince() {
      this.region.province.forEach(item => {
        if (item.value === parseInt(this.fields.distId)) {
          this.province = item.label
        }
      })
    },
    getDistrictsList(distId = 0, node = 'province') {
      getDistricts({ distId: distId }).then((res) => {
        if (res.code === 200) {
          const options = []
          res.data.dists.forEach(item => {
            const o = { value: item.DistId, label: item.DistName }
            options.push(o)

            if (parseInt(item.DistId) === parseInt(this.fields.distId)) {
              this.province = item.DistName
            }
          })
          this.region[node] = options
        }
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('createDataEmit', this.fields)
        }
      })
    }
  }
}
</script>
